<template>
  <div>
    <el-drawer
      title="回复评论列表"
      :visible.sync="drawerFlag"
      direction="rtl"
      :before-close="drawerClose"
      size="40%"
    >
      <div style="width: 100%; margin-bottom: 10px; margin-left: 20px">
        <el-button icon="el-icon-delete" size="small" @click="deleteBatch()"
          >批量删除</el-button
        >
      </div>
      <div style="width: 100%">
        <el-table
          :loading="listLoading"
          size="mini"
          :data="tableData.data"
          border
          style="width: 100%"
          @selection-change="selectTableList"
        >
          <el-table-column
            align="center"
            type="selection"
            width="55"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="id"
            label="ID"
            width="100"
          ></el-table-column>
          <el-table-column align="center" label="头像">
            <template slot-scope="scope">
              <el-image
                :src="scope.row.memberIcon"
                style="width: 40px; height: 40px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="memberNickname" label="昵称">
          </el-table-column>
          <el-table-column align="center" prop="comment" label="内容">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="回复时间">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="deleteComment(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageRight"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :current-page="searchForm.pageNum"
          :total="tableData.total"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev,pager, next, jumper"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getReplyList, batchDeleteReply } from "@/api/article";
export default {
  data() {
    return {
      drawerFlag: false,
      id: "",
      tableData: {
        data: [],
        total: 0,
      },
      searchForm: {
        commentId: "",
        pageNum: 1,
        pageSize: 10,
      },
      listLoading: false,
      selectList: [],
    };
  },
  methods: {
    deleteBatch() {
      if (this.selectList.length == 0) {
        this.$message({
          message: "请选择要删除的回复",
          type: "warning",
        });
        return;
      } else {
        this.$confirm("此操作将永久删除该回复, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          console.log(this.selectList);
          batchDeleteReply(this.selectList.join(',')).then(async (res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            await this.getList();
          });
        });
      }
    },
    selectTableList(val) {
      this.selectList = val.map((v) => v.id);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    deleteComment(v) {

      this.$confirm("此操作将永久删除该回复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        batchDeleteReply(v).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
        });
      });
    },
    async getList() {
      this.listLoading = true;
      this.searchForm.commentId = this.id;
      let params = {
        ...this.searchForm,
      };
      getReplyList(params)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    openDrawer(row) {
      this.searchForm.pageNum = 1;
      this.id = row.id;
      this.getList();
      this.drawerFlag = true;
    },
    drawerClose() {
      this.drawerFlag = false;
      this.$emit('close')
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-drawer__header {
  margin-bottom: 5px;
}
</style>
